بایند کردن مقادیر به ngif در انگولار

پاسخ هوش مصنوعی

در انگولار، برای ارزیابی یک شرط داینامیک از یک رشته، می توانید از Function Constructor یا eval استفاده کنید. با این حال، استفاده از eval به دلیل مسایل امنیتی معمولاً توصیه نمی شود. بنابراین، بهتر است از یک روش امن تر استفاده کنید. در اینجا یک روش پیشنهادی برای پیاده سازی این کار آورده شده است:

ابتدا از روش Function Constructor برای ارزیابی یک تابع شرطی استفاده کنید. در اینجا فرض می کنیم که متغیرهای test و test2 در محیط موجود هستند.

class YourComponent {
  test: number = 1;
  test2: number = 2;
  str: string = "test===1 && test2===2";

  evaluateCondition() {
    const fn = new Function('test', 'test2', `return ${this.str};`);
    return fn(this.test, this.test2);
  }
}

سپس می توانید از این تابع در ngIf استفاده کنید:

<div *ngIf="evaluateCondition()">
  شرط برآورده شده است!
</div>

این عمل اجازه می دهد تا شما از شرط داینامیک استفاده کنید و کاربران می توانند مقادیر خود را تنظیم کنند. توجه داشته باشید که این کار باید با احتیاط انجام شود و اطمینان حاصل کنید که ورودی ها امن هستند.

بایند کردن مقادیر به ngif در انگولار

برای بایند کردن اطلاعات در ngif به صورت خیلی ساده میتونید به صورت زیر عمل کنید :

<div *ngIf="days.day == 1">
    <p class="circle ml-3">Sun</p>
</div>
<div *ngIf="days.day == 2">
    <p class="circle ml-2">Mon</p>
</div>
<div *ngIf="days.day == 3">
    <p class="circle ml-2">Tue</p>
</div>
<div *ngIf="days.day == 4">
    <p class="circle ml-2">Wed</p>
</div>
<div *ngIf="days.day == 5">
    <p class="circle ml-2">Thu</p>
</div>
<div *ngIf="days.day == 6">
    <p class="circle ml-2">Fri</p>
</div>
<div *ngIf="days.day == 7">
    <p class="circle ml-2">Sat</p>
</div>

در کدهای بالا در هر تگ بررسی می کنیم که مقدار day  چه عددی می باشد و متناسب با آن روز هفته نمایش داده می شود.

البته این ساده ترین روش Bind کردن مقادیر هست. برای شرطهای پیچیده تر و یا حالت If/Else هم میتونید به صورت زیر عمل کنید.

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

حالات مختلف زیادی وجود داره که در داکیومنت های خود سایت انگولار می تونید مطالعه کنید.